<template>
  <div>
    <div style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
      <!-- 编辑器 -->
      <Editor style="height: 400px; overflow-y: hidden" :defaultConfig="editorConfig" v-model="html"
              @onChange="onChange" @onCreated="onCreated" />
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  name: "editorVue",
  components: { Editor, Toolbar },
  props: {
    content: {
      type: String,
      default: '',
    },
    readOnlys: { // 只读
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {
        toolbarKeys: [
          "headerSelect", //文本属性：正文、标题……
          "bold", //粗体
          "italic", //斜体
          { // 菜单组，包含多个菜单
            key: 'group-more-style', // 必填，要以 group 开头
            title: '更多', // 必填
            iconSvg: '<svg></svg>',
            menuKeys: [
              "underline", //下划线
              "through", // 删除线
              "sub", // 下标
              "sup", // 上标
            ]
          },
          "clearStyle", // 清除格式
          "|", //分隔
          "color", //字体颜色
          "bgColor", //背景颜色
          "|",
          "fontSize", //字号
          "fontFamily", //字体
          "lineHeight", //行高
          "|",
          "numberedList", //有序列表
          {
            key: 'group-justify',
            title: '对齐',
            // iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v1…72.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
            menuKeys: [
              "justifyLeft", // 左对齐
              "justifyRight", // 右对齐
              "justifyCenter", // 居中对齐
              "justifyJustify", // 两端对齐
            ]
          },
          "|",
          {
            key: 'group-image',
            title: '图片',
            // iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v1…72.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
            menuKeys: [
              "uploadImage", //上传图片
              "editImage", // 编辑图片
            ]
          },
          {
            key: 'group-video',
            title: '视频',
            // iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v1…72.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
            menuKeys: [
              "uploadVideo"
            ]
          },
          "|",
          "undo", //撤销
          "redo", //重做
        ]

      },
      editorConfig: {
        placeholder: "请输入内容",
        // autoFocus: false,
        // readOnly: true, // 只读、不可编辑
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {
            customUpload: this.uploadImg
          },
          uploadVideo: {
            customUpload: this.uploadVideos
          },
        },
      },
    };
  },
  watch: {
    readOnlys: {
      handler(newV) {
        if (newV) {
          this.editor.disable()  // 只读模式
        }
      }
    },
    content: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        this.html = newVal;
      }
    },
  },
  methods: {
    uploadImg(file, insertFn) {
      this.$emit('uploadImg', file, insertFn)
    },
    uploadVideos(file, insertFn) {
      this.$emit('uploadVideos', file, insertFn)
    },
    onCreated(editor) {
      this.editor = Object.seal(editor);
    },
    onChange(editor) {
      this.$emit('changeData', this.html)
    },
  },
  created() {
    this.html = this.content;
  },
  mounted() {
    this.html = this.content;
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor
  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
